
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <!-- Author -->
    <meta name="author" content="Themes Industry">
    <!-- description -->
    <meta name="description" content="MegaOne is a highly creative, modern, visually stunning and Bootstrap responsive multipurpose studio and portfolio HTML5 template with 8 ready home page demos.">
    <!-- keywords -->
    <meta name="keywords" content="Creative, modern, clean, bootstrap responsive, html5, css3, portfolio, blog, studio, templates, multipurpose, one page, corporate, start-up, studio, branding, designer, freelancer, carousel, parallax, photography, studio, masonry, grid, faq">
    <!-- Page Title -->
    <title>Motivational Speaker | MegaOne HTML5 Template</title>
    <!-- Favicon -->
    <link href="" rel="icon">
    <!-- Bundle -->
    <link href="static/css/bundle.min.css" rel="stylesheet">
    <!-- Plugin Css -->
    <link href="static/css/line-awesome.min.css" rel="stylesheet">
    <link href="static/css/revolution-settings.min.css" rel="stylesheet">
    <link href="static/css/jquery.fancybox.min.css" rel="stylesheet">
    <link href="static/css/owl.carousel.min.css" rel="stylesheet">
    <link href="static/css/cubeportfolio.min.css" rel="stylesheet">
    <link href="static/css/slick.css" rel="stylesheet">
    <link href="static/css/slick-theme.css" rel="stylesheet">
    <!-- Style Sheet -->
    <link href="static/css/navigation.css" rel="stylesheet">
    <link href="static/css/blog.css" rel="stylesheet">
    <link href="static/css/style.css" rel="stylesheet">
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="90">

<!-- Preloader -->
<div class="preloader">
    <div class="centrize full-width">
        <div class="vertical-center">
            <div class="spinner">
                <div class="double-bounce1"></div>
                <div class="double-bounce2"></div>
            </div>
        </div>
    </div>
</div>
<!-- Preloader End -->

<!--Header Start-->
<div id="main-header"></div>
<header id="home">
    <div class="upper-nav">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-6 mt-auto mb-auto">
                    <h4 class="top-text">We can create a brand that stands out and truly reflects your business.</h4>
                </div>
                <div class="col-12 col-lg-6 mt-auto mb-auto">
                    <ul class="top-detail d-block d-lg-flex justify-content-center justify-content-lg-end">
                        <li class="c-links d-none d-lg-block"><span><i class="la la-mobile"></i></span><a href="#">+(34)609 331754</a></li>
                        <li class="c-links d-none d-lg-block"><span><i class="la la-envelope"></i></span><a href="#">email@website.com</a></li>
                        <li class="social-links">
                            <span class="fb"><a href="#"><i class="la la-facebook-f"></i></a></span>
                            <span class="twit"><a href="#"><i class="la la-twitter"></i></a></span>
                            <span class="insta"><a href="#"><i class="la la-instagram"></i></a></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--Navigation-->
    <nav class="navbar navbar-top-default navbar-expand-lg navbar-simple nav-line">
        <div class="container">
            <div class="row no-gutters w-100">
                <div class="col-2">
                    <a href="" title="Logo" class="logo">
                        <!--Logo Default-->
                        <img src="static/picture/logo.png" alt="logo" class="logo-dark">
                    </a>
                </div>
                <!--Nav Links-->
                <div class="col-8">
                    <div class="collapse navbar-collapse" id="megaone">
                        <div class="navbar-nav ml-auto">
                            <a class="nav-link active scroll" href="#main-header">Home</a>
                            <a class="nav-link scroll" href="#about">About Me</a>
                            <a class="nav-link scroll" href="#portfolio-sec">My Work</a>
                            <a class="nav-link scroll" href="#blog-sec">Blogs</a>
                            <a class="nav-link scroll" href="#courses-sec">Courses</a>
                            <a class="nav-link scroll" href="#contact-us">Contact</a>
                        </div>
                    </div>
                </div>
                <!--Side Menu Button-->
                <div class="col-2">
                    <a href="javascript:void(0)" class="sidemenu_btn" id="sidemenu_toggle">
                        <span></span>
                        <span></span>
                        <span></span>
                    </a>
                </div>
            </div>
        </div>
    </nav>
    
</header>

<!--Side Nav-->
<div class="side-menu hidden">
    <div class="inner-wrapper">
        <span class="btn-close" id="btn_sideNavClose"><i></i><i></i></span>
        <nav class="side-nav w-100">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link scroll" href="#main-header">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll" href="#about">About Me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll" href="#portfolio-sec">My Work</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll" href="#blog-sec">Blogs</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll" href="#courses-sec">Courses</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll" href="#contact-us">Contact</a>
                </li>
            </ul>
        </nav>

        <div class="side-footer text-white w-100">
            <ul class="social-icons-simple">
                <li><a class="facebook-text-hvr" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
                <li><a class="instagram-text-hvr" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
                <li><a class="twitter-text-hvr" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
            </ul>
            <p class="text-white">&copy; 2020 MegaOne. Made With Love by Themesindustry</p>
        </div>
    </div>
</div>
<a id="close_side_menu" href="javascript:void(0);"></a>
<!-- End side menu -->


<!--Header End-->

<!--Home Start-->
<div id="rev-slider" class="rev-slider">
    <!-- START REVOLUTION SLIDER -->
    <div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="slider-shop" data-source="gallery" style="background:rgba(255,255,255,0);padding:0px;">
        <div id="rev_slider_1_5" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.4.8.1">
            <ul>
                <!-- SLIDE  -->
                <li data-index="rs-3" data-transition="fadethroughdark" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="2000" data-thumb="assets/100x50_44515-slider-bg-3.jpg" data-rotate="0" data-saveperformance="off" data-title="Slide 3" data-param1="01" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                    <!-- MAIN IMAGE -->
                    <img src="static/picture/slider-img.jpg" data-bgposition="center center" data-kenburns="on" data-duration="10000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-offsetstart="0 0" data-offsetend="0 0" data-bgparallax="10" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" alt="slider-image" data-no-retina="">
                    <div class="slider-overlay"></div>
                    <!-- LAYERS -->

                    <!-- LAYER NR. 11 -->
                    <div class="tp-caption   tp-resizeme rs-parallaxlevel-3" id="slide-3-layer-2" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-80','-80','-80','-80']" data-fontsize="['70','70','50','40']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"delay":10,"speed":2000,"frame":"0","from":"z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power2.easeOut"},{"delay":"wait","speed":280,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]' data-textalign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 6; white-space: nowrap; font-size: 70px; line-height: 16px; font-weight: 700; color: #ffffff; letter-spacing: 0;font-family: 'Montserrat', sans-serif;">Jessica Martin.</div>

                    <!-- LAYER NR. 12 -->
                    <div class="tp-caption   tp-resizeme rs-parallaxlevel-2" id="slide-3-layer-1" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['20','20','0','0']" data-fontsize="['18','16','16','16']" data-width="none" data-height="none" data-whitespace="nowrap" data-type="text" data-responsive_offset="on" data-frames='[{"delay":10,"speed":2000,"frame":"0","from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":280,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]' data-textalign="['inherit','inherit','inherit','inherit']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 5; white-space: nowrap; font-size: 18px; line-height: 22px; font-weight: 500; color: #eaeaef;font-family: 'Montserrat', sans-serif;">- Motivational Speaker -</div>

                    <!-- LAYER NR. 13 -->
                    <div class="tp-caption   tp-resizeme rs-parallaxlevel-2" id="slide-3-layer-3" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['100','100','100','100']" data-fontsize="['20','20','18','18']" data-width="['800','800','500','400']" data-height="none" data-whitespace="normal" data-type="text" data-responsive_offset="on" data-frames='[{"delay":10,"speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":280,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]' data-textalign="['center','center','center','center']" data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style="z-index: 7; font-size: 18px; line-height: 30px;text-align: center; font-weight: 300; color: #eaeaef; font-family: 'Montserrat', sans-serif;">Lorem ipsum dolor sit amet, conse ctetur adipiscing nu elit sed do eiusmod tem, conse ctetur adipiscing nu elit sed do eiusmod tem..</div>


                </li>
            </ul>
            <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div></div>
    </div>
    <!-- END REVOLUTION SLIDER -->
</div>
<!--Home End-->

<!--most speak counter start-->
<div class="speaker-counter">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="counter-div">
                    <div class="row">
                        <div class="col-12 col-md-6 col-lg-3 counter-cards text-center">
                            <div class="counter-card">
                                <a class="counter-icon"><i class="las la-trophy"></i></a>
                                <h4 class="counter-num">58</h4>
                                <p class="counter-text">Total Awards</p>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-lg-3 counter-cards text-center">
                            <div class="counter-card">
                                <a class="counter-icon"><i class="las la-users"></i></a>
                                <h4 class="counter-num">100</h4>
                                <p class="counter-text">Happy Clients</p>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-lg-3 counter-cards text-center">
                            <div class="counter-card">
                                <a class="counter-icon"><i class="las la-microphone-alt"></i></a>
                                <h4 class="counter-num">68</h4>
                                <p class="counter-text">Workshops</p>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-lg-3 counter-cards text-center">
                            <div class="counter-card">
                                <a class="counter-icon"><i class="las la-mug-hot"></i></a>
                                <h4 class="counter-num">80</h4>
                                <p class="counter-text">Cup of Coffees</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--most speak counter end-->

<!--About Star-->
<section id="about" class="about-sec">
    <div class="container">
        <div class="row dot-box">
            <!-- Heading Area-->
            <div class="col-12 col-lg-6 text-center text-lg-left">
                    <div class="heading-area pl-lg-4 p-0">
                        <h6 class="sub-title main-color">Basic Info About Me</h6>
                        <h2 class="title">About <strong>Myself</strong></h2>
                        <p class="paragraph">There are many variations of passages of Lorem Ipsum available be the majority have suffered alteration in some form, by injected humour or randomised words.</p>
                        <p class="quote"><i class="las la-quote-left"></i> If your actions inspire others to dream more, learn more, do more and become more, you are a leader.<i class="las la-quote-right"></i></p>
                            <!--List-->
                        <a class="btn yellow-and-white-slider-btn" href="#">READ MORE</a>
                    </div>
            </div>
            <div class="col-12 col-lg-5 offset-lg-1 about-img-area">
                <div class="about-img" style="background-image: url('static/image/img3.jpg')">
                    <div class="overlay-white"></div>
                    <img src="static/picture/img3.jpg">
                </div>
            </div>
        </div>
    </div>
</section>
<!--About End-->

<!--Project End-->
<section class="services-sec padding-top padding-bottom">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <div class="about-heading heading-details">
                    <h4 class="heading"><i class="las la-braille"></i>Our <strong>Services</strong><i class="las la-braille"></i></h4>
                    <p class="top-des"></p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6 col-lg-3 text-center">
                <div class="services-box">
                    <span class="pro-step blue">
                    <i class="las la-tv"></i>
                    </span>
                    <h4 class="services-heading">Workshops.</h4>
                    <p class="services-des">Lorem ipsum dolor sit amet, conse ctetur adipiscing nu elit sed do eiusmod tem.</p>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-3 text-center">
                <div class="services-box">
                    <i class="las la-trophy"></i>
                    <h4 class="services-heading">Trainning.</h4>
                    <p class="services-des">Lorem ipsum dolor sit amet, conse ctetur adipiscing nu elit sed do eiusmod tem.</p>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-3 text-center">
                <div class="services-box">
                    <i class="las la-film"></i>
                    <h4 class="services-heading">Classes.</h4>
                    <p class="services-des">Lorem ipsum dolor sit amet, conse ctetur adipiscing nu elit sed do eiusmod tem.</p>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-3 text-center">
                <div class="services-box">
                    <i class="las la-camera-retro"></i>
                    <h4 class="services-heading">Festivals.</h4>
                    <p class="services-des">Lorem ipsum dolor sit amet, conse ctetur adipiscing nu elit sed do eiusmod tem.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Project End-->

<!--Quote sec Start-->
<section class="quote-sec">
    <div class="overlay-dark"></div>
<!--    <div class="container">-->
        <div class="row no-gutters">
            <div class="col-12 col-lg-6 text-center parallax quote-video-content d-flex justify-content-center align-items-center" style="background-image: url('static/image/video-img.jpg')">
                <div class="overlay-dark"></div>
                <div class="quote-inner-content">
                    <a href="javascript:;" data-fancybox="gallery" data-title="Showcases">
                    <i class="las la-play"></i>
                    <span>Click to Watch</span>
                    </a>
                </div>
            </div>
            <div class="col-12 col-lg-6 text-center padding-top padding-bottom quote-detail-area d-flex justify-content-center align-items-center">
                <div class="quote-inner-detail">
                    <i class="las la-quote-left quote-icon"></i>
                    <p class="quote-text">Let the speech be better than silence, or be silent.
                    </p>
                <span class="quote-writer"><i class="las la-braille"></i>Dionysius Of Halicarnassus<i class="las la-braille"></i></span>
                </div>
            </div>
        </div>
<!--    </div>-->
</section>
<!--Quote sec End-->

<!--Event sec start-->
<section class="event-sec padding-top padding-bottom" id="event-sec">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center text-lg-left">
                <div class="heading-area">
                    <h6 class="sub-title main-color">Comming Event Timeline</h6>
                    <h2 class="title">Upcomming <strong>Event</strong></h2>
                </div>
            </div>
            <div class="col-12 col-lg-8">
                <div class="accordion events-cards" id="accordionExample">
                    <div class="card card-li">
                        <button class="c-btn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <div class="card-header" id="headingOne">
                            <div class="row no-gutters event-card">
                                <div class="col-3 text-center event-date-area d-flex justify-content-center align-items-center">
                                    <div>
                                        <h4 class="event-date">23</h4>
                                        <h4 class="event-month">March</h4>
                                    </div>
                                </div>
                                <div class="col-8 event-des text-left">
                                    <h4 class="event-title">Event Title Here</h4>
                                    <span class="event-location"><i class="las la-map-marker"></i>Location Here</span>
                                    <p class="event-detail">Lorem ipsum dolor sit amet, conse.</p>
                                </div>
                                <div class="col-1 d-flex justify-content-center align-items-center">
<!--                                    <button class="c-btn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">-->
                                        <i class="las la-arrow-down"></i>
<!--                                    </button>-->
                                </div>
                            </div>
                        </div>
                        </button>
                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                            <div class="row no-gutters e-counter-row">
                                <div class="col-12 event-counter">
                                    <div class="count-card e-counter-days text-center">
                                        <span>25</span>Days
                                    </div>
                                    <div class="count-card e-counter-hours text-center"><span>12</span>Hours</div>
                                    <div class="count-card e-counter-minutes text-center"><span>50</span>Minutes</div>
                                    <div class="count-card e-counter-seconds text-center"><span>60</span>Seconds</div>
                                    <a href="#" class="readbtn"><i class="las la-arrow-right"></i>Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card card-li">
                        <button class="c-btn" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <div class="card-header" id="headingTwo">
                            <div class="row no-gutters event-card">
                                <div class="col-3 text-center event-date-area d-flex justify-content-center align-items-center">
                                    <div>
                                        <h4 class="event-date">20</h4>
                                        <h4 class="event-month">March</h4>
                                    </div>
                                </div>
                                <div class="col-8 event-des text-left">
                                    <h4 class="event-title">Event Title Here</h4>
                                    <span class="event-location"><i class="las la-map-marker"></i>Location Here</span>
                                    <p class="event-detail">Lorem ipsum dolor sit amet, conse.</p>
                                </div>
                                <div class="col-1 d-flex justify-content-center align-items-center">
<!--                                    <button class="c-btn" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">-->
                                        <i class="las la-arrow-down"></i>
<!--                                    </button>-->
                                </div>
                            </div>
                        </div>
                        </button>
                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                            <div class="row no-gutters e-counter-row">
                                <div class="col-12 event-counter">
                                    <div class="count-card e-counter-days text-center">
                                        <span>25</span>Days
                                    </div>
                                    <div class="count-card e-counter-hours text-center"><span>12</span>Hours</div>
                                    <div class="count-card e-counter-minutes text-center"><span>50</span>Minutes</div>
                                    <div class="count-card e-counter-seconds text-center"><span>60</span>Seconds</div>
                                    <a href="#" class="readbtn"><i class="las la-arrow-right"></i>Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card card-li">
                        <button class="c-btn" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseTwo">
                        <div class="card-header" id="headingThree">
                            <div class="row no-gutters event-card">
                                <div class="col-3 text-center event-date-area d-flex justify-content-center align-items-center">
                                    <div>
                                        <h4 class="event-date">25</h4>
                                        <h4 class="event-month">March</h4>
                                    </div>
                                </div>
                                <div class="col-8 event-des text-left">
                                    <h4 class="event-title">Event Title Here</h4>
                                    <span class="event-location"><i class="las la-map-marker"></i>Location Here</span>
                                    <p class="event-detail">Lorem ipsum dolor sit amet, conse.</p>
                                </div>
                                <div class="col-1 d-flex justify-content-center align-items-center">
<!--                                    <button class="c-btn" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseTwo">-->
                                        <i class="las la-arrow-down"></i>
<!--                                    </button>-->
                                </div>
                            </div>
                        </div>
                        </button>
                        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                            <div class="row no-gutters e-counter-row">
                                <div class="col-12 event-counter">
                                    <div class="count-card e-counter-days text-center">
                                        <span>20</span>Days
                                    </div>
                                    <div class="count-card e-counter-hours text-center"><span>12</span>Hours</div>
                                    <div class="count-card e-counter-minutes text-center"><span>50</span>Minutes</div>
                                    <div class="count-card e-counter-seconds text-center"><span>60</span>Seconds</div>
                                    <a href="#" class="readbtn"><i class="las la-arrow-right"></i>Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4">
                <div class="img-space">
                    <a href="javascript:;" data-fancybox="gallery" data-title="Showcases">
                        <img src="static/picture/p-5.png">
                        <div class="overlay-spaces"></div>
                        <i class="las la-play"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Event sec End-->

<!--Portfolio sec start-->
<div id="portfolio-sec" class="portfolio-sec">
        <div class="portfolio-heading">
        <div class="row no-gutters">
            <div class="col-12 text-center">
                <div class="heading-details">
                    <h4 class="heading"><i class="las la-braille"></i>My Work<i class="las la-braille"></i></h4>
                    <p class="top-des"></p>
                </div>
            </div>
        </div>
        </div>
        <div class="portfolio-items owl-carousel owl-theme">
            <div class="item">
                <a href="javascript:;" data-fancybox="gallery" data-title="Showcases">
                    <div class="port-img">
                        <img src="static/picture/p-2.png" alt="">
                    </div>
                    <div class="portfolio-overlay">
                        <div class="overlay-inner-content">
                        <i class="las la-play"></i>
                        <span>play</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item">
                <a href="static/picture/p-1.png" data-fancybox="gallery" data-title="Showcases">
                    <div class="port-img">
                        <img src="static/picture/p-1.png" alt="">
                    </div>
                    <div class="portfolio-overlay">
                        <div class="overlay-inner-content">
                        <i class="las la-plus"></i>
                        <span>view</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item">
                <a href="static/picture/p-3.png" data-fancybox="gallery" data-title="Showcases">
                    <div class="port-img">
                        <img src="static/picture/p-3.png" alt="">
                    </div>
                    <div class="portfolio-overlay">
                        <div class="overlay-inner-content">
                            <i class="las la-plus"></i>
                            <span>view</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
</div>
<!--Portfolio sec end-->

<!--Blog sec start-->
<section class="blog-sec padding-top padding-bottom" id="blog-sec">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center text-lg-left">
                <div class="heading-area">
                    <h6 class="sub-title main-color">Read About News</h6>
                    <h2 class="title">Latest <strong>Blogs</strong><i class="las la-braille"></i></h2>
                </div>
            </div>
            <div class="col-12 latest-blogs">
                <div class="inner-blog-content">
                    <div class="half-blue-overlay"></div>
                    <div class="row blog-cards">
                        <div class="col-12  offset-lg-3 col-lg-3 blog-card">
                            <div class="news-card">
                                <div class="news-img">
                                    <div class="row no-gutters">
                                        <div class="col-12">
                                            <img src="static/picture/cast3.jpg">
                                        </div>
                                    </div>
                                </div>
                                <div class="news-content">
                                    <h4 class="news-heading">Latest Blog Title Here</h4>
                                    <span class="news-date">20-jan-2019 | Julia Bencid</span>
<!--                                    <p class="news-text">Lorem ipsum dolor sit amet, conse ctetur adipiscing nu elit.</p>-->
                                    <a href="standard-blog.html" class="btn news-btn">
                                        Read More<i class="las la-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-3 blog-card">
                            <div class="news-card">
                                    <div class="no-gutters news-carousal owl-carousel owl-theme">
                                        <div class="item">
                                            <img src="static/picture/cast2.jpg">
                                        </div>
                                        <div class="item">
                                            <img src="static/picture/cast4.jpg">
                                        </div>
                                    </div>
<!--                                    <a href="#" class="btn news-btn"><i class="las la-arrow-right"></i></a>-->
                                <div class="news-content">
                                    <h4 class="news-heading">Latest Blog Title Here</h4>
                                    <span class="news-date">20-jan-2019 | Julia Bencid</span>
                                    <a href="single-blog.html" class="btn news-btn">
                                        Read More<i class="las la-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-12  col-lg-3 blog-card">
                            <div class="news-card">
                                <div class="news-img">
                                    <img src="static/picture/cast1.jpg">
                                    <a href="javascript:;" data-fancybox="gallery" data-title="Showcases" class="btn news-video-btn"><i class="las la-play"></i></a>
                                </div>
                                <div class="news-content">
                                    <h4 class="news-heading">Latest Blog Title Here</h4>
                                    <span class="news-date">20-jan-2019 | Julia Bencid</span>
                                    <a href="standard-blog.html" class="btn news-btn">
                                        Read More<i class="las la-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Blog sec end-->

<!--Testimonial sec start-->
<section class="testimonial-sec padding-top padding-bottom parallax" id="testimonial-sec" style="background-image: url('static/image/test2.jpg')">
    <div class="overlay-dark"></div>
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <div class="heading-details">
                    <h4 class="heading"><i class="las la-braille"></i>Client <strong>Reviews</strong><i class="las la-braille"></i></h4>
                </div>
            </div>
        </div>
        <div class="testimonial-carousel owl-carousel owl-theme">
            <div class="item text-center">
                <div class="testimonial-review">
                    <div class="review-detail">
                        <p class="text-des">Lorem ipsum is simply dummy text of the printing and type setting. Lorem Ipsum has been the industry’s is dummy. Lorem ipsum is simply dummy text of the printing and typesetting. Lorem Ipsum has been the industry’s standard dummy.</p>
                        <ul class="test-review">
                            <li><a href="#"><i class="las la-star"></i></a></li>
                            <li><a href="#"><i class="las la-star"></i></a></li>
                            <li><a href="#"><i class="las la-star"></i></a></li>
                            <li><a href="#"><i class="las la-star"></i></a></li>
                            <li><a href="#"><i class="las la-star"></i></a></li>
                        </ul>
                    </div>
                    <div class="client-info media-body">
                        <h5 class="client-name mt-0">- JOE MARTIN -</h5>
                        <p class="client-designation">Dr - Health B.</p>
                    </div>
                </div>
            </div>
            <div class="item text-center">
                <div class="testimonial-review">
                    <div class="review-detail">
                        <p class="text-des">Lorem ipsum is simply dummy text of the printing and type setting. Lorem Ipsum has been the industry’s is dummy. Lorem ipsum is simply dummy text of the printing and typesetting. Lorem Ipsum has been the industry’s standard dummy.</p>
                        <ul class="test-review">
                            <li><a href="#"><i class="las la-star"></i></a></li>
                            <li><a href="#"><i class="las la-star"></i></a></li>
                            <li><a href="#"><i class="las la-star"></i></a></li>
                            <li><a href="#"><i class="las la-star"></i></a></li>
                            <li><a href="#"><i class="las la-star"></i></a></li>
                        </ul>
                    </div>
                    <div class="client-info media-body">
                        <h5 class="client-name mt-0">- JOE MARTIN -</h5>
                        <p class="client-designation">Dr - Health B.</p>
                    </div>
                </div>
            </div>
        </div>

        <a id="customPrevBtn" class="test-btn"><i class="fas fa-angle-left"></i> </a>
        <a id="customNextBtn" class="test-btn"><i class="fas fa-angle-right"></i></a>
    </div>
</section>
<!--Testimonial sec end-->

<!--Courses sec end-->
<section class="courses-sec padding-top" id="courses-sec">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center text-lg-right">
                <div class="heading-area">
                    <h6 class="sub-title main-color">Read About New Courses</h6>
                    <h2 class="title"><i class="las la-braille"></i>Latest <strong>Courses</strong></h2>
                </div>
            </div>
            <div class="col-12 latest-courses">
                <div class="inner-courses-content">
                    <div class="half-blue-overlay"></div>
                    <div class="row course-cards owl-carousel owl-theme">
                        <div class="item">
                            <div class="course-card">
                                <div class="course-img">
                                    <div class="row no-gutters">
                                        <div class="col-12">
                                            <img src="static/picture/cast5.jpg">
                                        </div>
                                    </div>
                                </div>
                                <div class="course-content">
                                    <h4 class="course-heading">Course Title Here</h4>
                                    <span class="course-date">Taken by - Julia Bencid</span>
                                    <!--                                    <p class="news-text">Lorem ipsum dolor sit amet, conse ctetur adipiscing nu elit.</p>-->
                                    <a href="courses.html" class="btn course-btn">
                                        Read More<i class="las la-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="course-card">
                                <div class="course-img">
                                    <div class="row no-gutters">
                                        <div class="col-12">
                                            <img src="static/picture/cast6.jpg">
                                        </div>
                                    </div>
                                </div>
                                <div class="course-content">
                                    <h4 class="course-heading">Course Title Here</h4>
                                    <span class="course-date">Taken by - Julia Bencid</span>
                                    <!--                                    <p class="news-text">Lorem ipsum dolor sit amet, conse ctetur adipiscing nu elit.</p>-->
                                    <a href="courses.html" class="btn course-btn">
                                        Read More<i class="las la-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="course-card">
                                <div class="course-img">
                                    <div class="row no-gutters">
                                        <div class="col-12">
                                            <img src="static/picture/cast7.jpg">
                                        </div>
                                    </div>
                                </div>
                                <div class="course-content">
                                    <h4 class="course-heading">Course Title Here</h4>
                                    <span class="course-date">Taken by - Julia Bencid</span>
                                    <!--                                    <p class="news-text">Lorem ipsum dolor sit amet, conse ctetur adipiscing nu elit.</p>-->
                                    <a href="courses.html" class="btn course-btn">
                                        Read More<i class="las la-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
<!--                        col-12 col-md-5 col-lg-4-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Courses sec end-->

<!--Contact sec start-->
<section id="contact-us" class="contact-sec padding-top">
    <div class="row no-gutters">
        <div class="col-12 text-center">
            <div class="about-heading heading-details">
                <h4 class="heading"><i class="las la-braille"></i>Contact <strong>Us</strong><i class="las la-braille"></i></h4>
                <p class="top-des"></p>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-6 contact-details text-center text-lg-left order-2 order-lg-1">
                <div class="location-details">
                    <h4 class="contact-heading">Get's In <strong>Touch</strong></h4>
                    <p class="contact-address">123 Stree New York City , United States Of America.</p>
                    <ul class="contact-list">
                        <li><span>Office Telephone :</span> 001 01085379709</li>
                        <li><span>Mobile :</span> 001 63165370895</li>
                        <li><span>Email :</span> admin@website.com</li>
                        <li><span>Inquiries :</span> email@website.com</li>
                        <li><span>Mon-Fri:</span> 9am to 6pm</li>
                    </ul>
                    <ul class="slider-social contact-s-media">
                        <li class="animated-wrap"><a class="animated-element" href="javascript:void(0);"><i class="lab la-facebook-f"></i> </a> </li>
                        <li class="animated-wrap"><a class="animated-element" href="javascript:void(0);"><i class="lab la-twitter"></i> </a> </li>
                        <li class="animated-wrap"><a class="animated-element" href="javascript:void(0);"><i class="lab la-google-plus-g"></i> </a> </li>
                        <li class="animated-wrap"><a class="animated-element" href="javascript:void(0);"><i class="lab la-linkedin-in"></i> </a> </li>
                        <li class="animated-wrap"><a class="animated-element" href="javascript:void(0);"><i class="lab la-instagram"></i> </a> </li>
                    </ul>
                </div>
            </div>

            <div class="col-12 col-lg-6 contact-form-box order-1 order-lg-2">
                <form class="contact-form" id="contact-form-data">
                    <div class="row">
                        <div class="col-6">
                            <div class="col-sm-12" id="result"></div>
                            <div class="form-group">
                                <input class="form-control" type="text" placeholder="First Name:" required="" id="first_name" name="firstName">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <input class="form-control" type="text" placeholder="Last Name:" required="" id="last_name" name="lastName">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <input class="form-control" type="email" placeholder="Email:" required="" id="email" name="userEmail">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <input class="form-control" type="tel" placeholder="Phone:" id="phone" name="userPhone" required="">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <textarea class="form-control" placeholder="Message" id="message" name="userMessage"></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <button type="button" class="contact_btn btn btn-large yellow-and-white-slider-btn mt-4" id="submit_btn">Contact Now</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<!--Contact sec end-->
<!--map sec-->
<div class="map-sec" id="map-sec">
        <div class="row no-gutters">
            <div class="col-12">
                <div class="google-map" id="google-map"></div>
            </div>
        </div>
</div>
<!--map sec-->
<!--Brands sec start-->
<div class="brand-sec bg-light" id="brand-sec">
    <div class="container">
        <div class="row no-gutters">
            <div class="col-12">
                <div id="sponser-tags" class="sponser-tags owl-carousel owl-theme">
                    <div class="item brand-img d-flex justify-content-center">
                        <img src="static/picture/brand1.png" alt="brand1">
                    </div>
                    <div class="item brand-img d-flex justify-content-center">
                        <img src="static/picture/brand1.png" alt="brand2">
                    </div>
                    <div class="item brand-img d-flex justify-content-center">
                        <img src="static/picture/brand1.png" alt="brand3">
                    </div>
                    <div class="item brand-img d-flex justify-content-center">
                        <img src="static/picture/brand1.png" alt="brand4">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--Brands sec end-->

<!--Footer Start-->
<footer class="footer-style-1 bg-light">
    <div class="container">
        <div class="row align-items-center">
            <!--Social-->
            <div class="col-lg-6">
                <div class="footer-social text-center text-lg-left ">
                    <ul class="list-unstyled">
                        <li><a class="wow fadeInUp" href="javascript:void(0);"><i aria-hidden="true" class="fab fa-facebook-f"></i></a></li>
                        <li><a class="wow fadeInDown" href="javascript:void(0);"><i aria-hidden="true" class="fab fa-twitter"></i></a></li>
                        <li><a class="wow fadeInUp" href="javascript:void(0);"><i aria-hidden="true" class="fab fa-google-plus-g"></i></a></li>
                        <li><a class="wow fadeInDown" href="javascript:void(0);"><i aria-hidden="true" class="fab fa-linkedin-in"></i></a></li>
                        <li><a class="wow fadeInUp" href="javascript:void(0);"><i aria-hidden="true" class="fab fa-instagram"></i></a></li>
                        <li><a class="wow fadeInDown" href="javascript:void(0);"><i aria-hidden="true" class="fab fa-pinterest-p"></i></a></li>
                    </ul>
                </div>
            </div>
            <!--Text-->
            <div class="col-lg-6 text-center text-lg-right">
                <p class="company-about fadeIn">Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                </p>
            </div>
        </div>
    </div>
</footer>
<!--Footer End-->

<!--Scroll Top Start-->
<span class="scroll-top-arrow"><i class="fas fa-angle-up"></i></span>
<!--Scroll Top End-->

<!-- JavaScript -->
<script src="static/js/bundle.min.js"></script>
<!-- Plugin Js -->
<script src="static/js/jquery.appear.js"></script>
<script src="static/js/jquery.fancybox.min.js"></script>
<script src="static/js/owl.carousel.min.js"></script>
<script src="static/js/parallaxie.min.js"></script>
<script src="static/js/wow.min.js"></script>
<!-- REVOLUTION JS FILES -->
<script src="static/js/jquery.themepunch.tools.min.js"></script>
<script src="static/js/jquery.themepunch.revolution.min.js"></script>
<script src="static/js/jquery.cubeportfolio.min.js"></script>
<!-- SLIDER REVOLUTION EXTENSIONS -->
<script src="static/js/revolution.extension.actions.min.js"></script>
<script src="static/js/revolution.extension.carousel.min.js"></script>
<script src="static/js/revolution.extension.kenburn.min.js"></script>
<script src="static/js/revolution.extension.layeranimation.min.js"></script>
<script src="static/js/revolution.extension.migration.min.js"></script>
<script src="static/js/revolution.extension.migration.min.js"></script>
<script src="static/js/revolution.extension.parallax.min.js"></script>
<script src="static/js/revolution.extension.slideanims.min.js"></script>
<script src="static/js/revolution.extension.video.min.js"></script>
<!-- google map
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJRG4KqGVNvAPY4UcVDLcLNXMXk2ktNfY"></script> -->
<script src="static/js/map.js"></script>
<!--Tilt Js-->
<script src="static/js/tilt.jquery.min.js"></script>
<script src="static/js/slick.js"></script>
<script src="static/js/slick.min.js"></script>

<!--contact form-->
<script src="static/js/contact_us.js"></script>
<!-- custom script-->
<script src="static/js/script.js"></script>

</body>
</html>